<template>
    <view v-if="pageData && pageData.list" :style="{ background: pageData.bgColor, padding: `0 ${pageData.margin * 2}rpx`, marginTop: pageData.marginTop ? `${pageData.marginTop * 2}rpx` : 0 }">
        <!-- 单图 -->
        <block v-if="pageData.list.length == 1 && pageData.list[0].img">
            <!-- 全屏 -->
            <view class="p-re" :style="{ height: fullHeight + 'px' }" v-if="pageData.fullscreen">
                <image :src="$imgUrls(newList[0].img)" mode="aspectFill" :class="{ shadow: pageData.shadow == 1 }" :style="{ borderRadius: `${pageData.radius * 2}rpx` }"></image>
                <view
                    v-for="(item, index) in newList[0].area"
                    :key="index"
                    class="p-ab"
                    @click="$banerGo(item)"
                    :style="{ width: `${item.w}px`, height: `${item.h}px`, left: `${item.x}px`, top: `${item.y}px` }"
                ></view>
            </view>

            <!-- 高度自适应 -->
            <view class="p-re" v-else>
                <view class="txtImgBox" :class="{ show: isShow }">
                    <image :src="$imgUrls(txtImg)" mode="widthFix" class="txtImg"></image>
                </view>
                <image :src="$imgUrls(pageData.list[0].img)" mode="widthFix" :class="{ shadow: pageData.shadow == 1 }" :style="{ borderRadius: `${pageData.radius * 2}rpx` }"></image>
                <view
                    v-for="(item, index) in pageData.list[0].area"
                    :key="index"
                    class="p-ab"
                    @click="$banerGo(item)"
                    :style="{ width: `${item.w * 2}rpx`, height: `${item.h * 2}rpx`, left: `${item.x * 2}rpx`, top: `${item.y * 2}rpx` }"
                ></view>
            </view>
        </block>

        <!-- 轮播 -->
        <view v-if="pageData.list.length > 1">
            <swiper :style="{ height }" indicator-dots indicator-color="#fff" :indicator-active-color="color" autoplay :interval="3000">
                <swiper-item v-for="(item, index) in pageData.list" :key="index" class="p-re">
                    <image
                        :src="$imgUrls(item.img)"
                        mode="aspectFill"
                        class="wh"
                        @load="handleLoad($event, index)"
                        :class="{ shadow: pageData.shadow == 1 }"
                        :style="{ borderRadius: `${pageData.radius * 2}rpx` }"
                    ></image>
                    <view
                        v-for="(itm, idx) in item.area"
                        :key="idx"
                        class="p-ab"
                        @click="$banerGo(itm)"
                        :style="{ width: `${itm.w * 2}rpx`, height: `${itm.h * 2}rpx`, left: `${itm.x * 2}rpx`, top: `${itm.y * 2}rpx` }"
                    ></view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'hotZone',
        props: ['pageData', 'isImmerse', 'table_bar'],
        data() {
            return {
                height: '',
                newList: [],
                fullHeight: 0,
                txtImg: 'https://msraimgcdn.mogoie.com/6166/1758530417351.png',
                isShow: false
            };
        },
        computed: {
            ...mapState(['color', 'System', 'totalHeight'])
        },
        created() {
            if (this.pageData.fullscreen) {
                this.fullHeight = this.System.screenHeight;
                if (this.isImmerse == 1) this.fullHeight -= this.totalHeight; // 非沉浸式
                if (this.table_bar && !this.table_bar.homeHide) this.fullHeight -= uni.upx2px(100); // 首页显示tabbar
                this.newList = this.pageData.list.map((item) => ({
                    ...item,
                    area: item.area.map((subItem) => this.computeArea(subItem, item))
                }));
            }
            setTimeout(() => {
                this.isShow = true;
            }, 500);
        },
        methods: {
            handleLoad(e, index) {
                if (!index) {
                    const { width, height } = e.detail;
                    this.height = 750 / (width / height) + 'rpx';
                }
            },
            computeArea(item, { img_w, img_h }) {
                const fullWidth = this.System.screenWidth - this.pageData.margin * 2;
                // 原图尺寸
                const imgWidth = 375;
                const imgHeight = (imgWidth / img_w) * img_h;
                // 计算缩放比例
                const scale = Math.max(fullWidth / imgWidth, this.fullHeight / imgHeight);
                // 计算裁剪量
                const newWidth = imgWidth * scale;
                const newHeight = imgHeight * scale;
                const cropX = Math.max(0, (newWidth - fullWidth) / 2);
                const cropY = Math.max(0, (newHeight - this.fullHeight) / 2);
                // 计算热区最终位置和尺寸
                const x = item.x * scale - cropX;
                const y = item.y * scale - cropY;
                const w = item.w * scale;
                const h = item.h * scale;
                return {
                    ...item,
                    x,
                    y,
                    w,
                    h
                };
            }
        }
    };
</script>

<style lang="scss" scoped>
    .shadow {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    .txtImgBox {
        width: 750rpx;
        height: 0;
        overflow: hidden;
        position: absolute;
        top: 124rpx;
        left: 50%;
        transform: translateX(-50%); /* 推荐代替 left:50% 配合位移居中 */
        z-index: 100;
        transition: height 2s ease-out; /* 添加过渡动画 */
    }

    .txtImgBox.show {
        height: 506rpx;
    }
</style>
